import './user.css';
import React, {useEffect} from 'react';
import {Avatar, Button, List, Popconfirm, Skeleton, Space, Tag} from 'antd';

import {TaskStore} from "../stores/task";
import {observer} from "mobx-react-lite";
import TaskModal from "./taskModal";
import {TaskItem} from "../interface";


interface Props {
    key: string
}

const TaskList: React.FC<Props> = observer((props) => {
    const store = TaskStore();
    const {dataList, loading, showModal, currentRecord} = store;

    useEffect(() => {
        console.log("模拟componentDidMount，即只运行一次该函数");
        queryList()
    }, [store]);

    const deleteTask = (record: any) => {
        console.log('delete', record);
        store.deleteTask(record.id);
    };
    const updateTask = (record: TaskItem) => {
        console.log('updateTask', record);
        const currentRecord = {
            "id": record.id,
            "title": record.title,
            "content": record.content,
            "ref_user": record.ref_user,
            "status": record.status
        };
        store.openModal(true, currentRecord);
    };

    const openModal = () => {
        store.openModal(true);
    };
    const queryList = () => {
        store.fetchTasks();
    }

    const modalProps = {
        open: showModal,
        currentRecord,
        onCreate: (values: any) => {
            console.log('Received values of form: ', values);
            store.createTask(values);
        },
        onUpdate: (id: number, values: any) => {
            console.log('Received values of form: ', id, values);
            store.updateTask(id, values);
        },
        close: () => {
            store.openModal(false);
        }
    }

    const onLoadMore = () => {
    };
    const loadMore = null;


    return (<>
            <Space style={{marginBottom: 1}}>
                <Tag color="blue">存在任务：{store.taskCount}</Tag>
                <Tag color="green">完成任务：{store.taskDoneCount}</Tag>
                <Tag color="magenta">未完成任务：{store.taskTodoCount}</Tag>
                <Button type="primary" style={{marginRight: 10, paddingRight: 10}} onClick={openModal}>新增</Button>
            </Space>
            <List
                className="demo-loadmore-list"
                loading={loading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={dataList}
                renderItem={(item: TaskItem, index) => (
                    <List.Item
                        actions={[
                            <Button type="primary" onClick={() => updateTask(item)}>编辑</Button>,
                            <Popconfirm
                                title="是否删除"
                                description="您确定要删除此任务?"
                                onConfirm={() => deleteTask(item)}
                                okText="确认"
                                cancelText="取消"
                            >
                                <Button danger>删除</Button>
                            </Popconfirm>
                        ]}
                    >
                        <Skeleton avatar title={false} loading={item.loading} active>
                            <List.Item.Meta
                                avatar={<Avatar style={{backgroundColor: '#fde3cf', color: '#f56a00'}}
                                                size={50}>{item.userName}</Avatar>}
                                title={<a href="https://ant.design">{item.title}</a>}
                                description={item.content}
                            />
                            <div>
                                <Tag color={item.status ? 'green' : 'red'}>
                                    {item.status ? '完成' : '未完成'}
                                </Tag>
                            </div>
                        </Skeleton>
                    </List.Item>
                )}
            />
            <TaskModal {...modalProps}/>
        </>
    );
});
export default TaskList;
